<script setup lang="ts">

import HeaderArea from "@/components/search/HeaderArea.vue";
import IndexSlot from "@/views/homePage/components/indexSlot.vue";
import {getSwiperRouter} from "@/api/home";
import {useRoute} from "vue-router";
import {ref} from "vue";
import {showToast} from "vant";

let picList = ref()
const route = useRoute()
// console.log(route.query.mediaId)
getSwiperRouter(route.query.mediaId).then(res=>{
    console.log(res)
    picList.value ='http://192.168.5.120:8199' + res.data.mediaLink
})
function copy () {
    showToast('已复制成功')
}
</script>

<template>
    <header-area>热点详情</header-area>
  <index-slot>
      <template v-slot:back/>
  </index-slot>
    <div class="swiperBox">
        <div class="imgs">
            <div class="imgBox">
                <img :src="picList" />
            </div>
        </div>
        <div class="copyLink" @click="copy">
            点击此处复制外部链接到剪切板
        </div>
    </div>
    <br>

</template>

<style scoped>
.swiperBox {
    width: 345px;
    margin: 5px 15px ;
    margin-top: -70px;
    .imgs {
        width: 340px;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
    }
    .imgBox {
        width: 330px;
        margin: 5px ;
        height: 160px;
        border-radius: 5px;
        >img {
            width: 100%;
            height: 100%;
        }
    }
    .copyLink {
        float: right;
        font-size: 12px;
        color: #999999;
    }
}
</style>